<template>
  <div>   
    <div id="app">
      <keep-alive>
           <router-view></router-view>
      </keep-alive>     
    </div>
    <div class="tabbar">
         <van-tabbar
      v-model="active"
      active-color="#666666"
      inactive-color="#666666"
      @change="onChange"
      :placeholder='true'
    >
      <van-tabbar-item to="/">
        <span>{{ list[0].text }}</span>
        <template #icon="props">
          <img class="pp"
            :src="props.active ? list[0].iconPath : list[0].selectedIconPath"
          />
        </template>
      </van-tabbar-item>
      <van-tabbar-item to="/rili">
        <span>{{ list[1].text }}</span>
        <template #icon="props">
          <img class="pp"
            :src="props.active ? list[1].iconPath : list[1].selectedIconPath"
          />
        </template>
      </van-tabbar-item>
      <van-tabbar-item to="/Circlellies">
        <span>{{ list[2].text }}</span>
        <template #icon="props">
          <img class="pp"
            :src="props.active ? list[2].iconPath : list[2].selectedIconPath"
          />
        </template>
      </van-tabbar-item>
    </van-tabbar> 
    </div>
 
  </div>
</template>
<script type="text/ecmascript-6">
import { Tabbar, TabbarItem } from 'vant'
let vm = null
export default {
  name:'tabbar',
  data: function () {
    return {
      active: 0,
      list: [
        {
          iconPath: require('../assets/image/shouye.png'),
          selectedIconPath: require('../assets/image/shouye2.png'),
          text: '首页',
          checked: true
        },
        {
          iconPath: require('../assets/image/men2.png'),
          selectedIconPath: require('../assets/image/men.png'),
          text: '萌友圈',
          checked: false
        },
        {
          iconPath: require('../assets/image/wode2.png'),
          selectedIconPath: require('../assets/image/wode.png'),
          text: '我的',
          checked: false
        }
      ]
    }
  },
  // computed: {
  //   swiper() {
  //     return this.$refs.mySwiper.$swiper
  //   }
  // },
  components: {
    [Tabbar.name]: Tabbar,
    [TabbarItem.name]: TabbarItem,
  },
  created(){
    vm = this
    plus.navigator.setStatusBarStyle('dark')
  },
  mounted() {
    // console.log('Current Swiper instance object', this.swiper)
    this.init()
  },
  beforeDestroy() {
    // this.slide.destroy()
  },
  methods: {
    init() {
    },
    onChange(index) {     
      this.list[index].checked = true    
    }
  }
}
</script>
<style lang="less" scoped>
#app{
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    // padding-bottom: 100px;
    height: 100%;
    // z-index: 1;
}
.tabbar{
    position: absolute;
    left: 0px;
    right: 0px;
    bottom: 0px;
    // z-index: 999;
}
</style>
